<template>
  <div class="right3">
    <div v-if="Params.level === 1 || Params.level === 2">    
      <el-form :inline="true" :model="formInline" class="demo-form-inline" v-show="Params.level  === 1 ">
        <el-form-item label="行政区">
          <el-cascader :options="zoneList" :props="props1" v-model="formInline.xzqdms" clearable  style="width: 260px" />
        </el-form-item>
        <el-form-item label="隐患类型">
          <el-select style="width: 260px"
            v-model="formInline.yhlx"
            placeholder="请选择"
            clearable
          >
            <el-option
            v-for="item in yhlxOptions"
            :key="item.value"
            :label="item.name"
            :value="item.value"
            />
            <!-- <el-option v-for="(item,index) in yhlxOptions" :label="item.name" :value="item.value" :key="item.value" /> -->
          </el-select>
        </el-form-item>
        <el-form-item>
              <el-date-picker
                v-model="formInline.timeRange"
                type="daterange"
                unlink-panels
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                @change="timeChange"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
                size="default"
              />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="getData">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="newTableData"
        ref="tableRef"
        :max-height="Params.level === 1?tableH:tableH_"
        style="width: 100%"      
      >
        <el-table-column
          v-for="column in dynamicColumns"
          :key="column.prop"
          :fixed="column.fixed"
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
          :align="column.align"
          :sortable="column.sortable"
          :sort-method="column.sortMethod"
          :show-overflow-tooltip="column.overflow"
        >

          <template v-if="column.prop === 'fxcs' && Params.level === 1" #default="{ row, column }">
            <span
              class="content-color"
              @click="handlePopulationClick(row, column)"
              >{{ row.fxcs }}
            </span>
          </template>
          <template v-if="column.prop === 'fwbh' && Params.level === 2" #default="{ row, column }">
            <span
              class="content-color"
              @click="handleCheckFw(row, column)"
              >{{ row.fwbh }}
            </span>
          </template>
        
        </el-table-column>
      </el-table>
      <el-pagination class="el-page-class"
            v-model:current-page="page"
            :page-size="limit"
            :size="limit"
            layout="total, prev, pager, next"
            :total="total"
            @current-change="handleCurrentChange"
          />
    </div>

    <div v-if="Params.level === 3">
      <el-tabs type="border-card">
        <el-tab-pane label="房屋基本信息">
          <el-scrollbar :max-height="tableH_">
            <el-descriptions
              size='default'
              label-align	="left"
              align="center"
              border
              :column="2"
            >
                <el-descriptions-item label="隐患状态">{{buildingPcYhLogDetailDtoList.pczt}}</el-descriptions-item>
                <el-descriptions-item label="自查时间">{{buildingPcYhLogDetailDtoList.pcsj}}</el-descriptions-item>
                <el-descriptions-item label="户主姓名">{{buildingPcYhLogDetailDtoList.hzxm}}</el-descriptions-item>
                <el-descriptions-item label="房屋编号">{{buildingPcYhLogDetailDtoList.fwbh}}</el-descriptions-item>


                <el-descriptions-item label="总居住人数(人)">{{buildingPcYhLogDetailDtoList.jzrks}}</el-descriptions-item>
                <el-descriptions-item label="租住人数(人)">{{buildingPcYhLogDetailDtoList.zzrs}}</el-descriptions-item>
                <el-descriptions-item label="房屋层数(层)">{{buildingPcYhLogDetailDtoList.cs}}</el-descriptions-item>
                <el-descriptions-item label="房间数量(个)">{{buildingPcYhLogDetailDtoList.fjsl}}</el-descriptions-item>

                <el-descriptions-item label="出租房间数量(个)">{{buildingPcYhLogDetailDtoList.jzfjs}}</el-descriptions-item>
                <el-descriptions-item label="房屋首层现有安全出口的数量(个)">{{buildingPcYhLogDetailDtoList.jzscxyaqcksl}}</el-descriptions-item>
                <el-descriptions-item label="房屋现有疏散楼梯的数量(个)">{{buildingPcYhLogDetailDtoList.jzxyssltsl}}</el-descriptions-item>
                <el-descriptions-item label="房屋首层面积(平方米)">{{buildingPcYhLogDetailDtoList.jzscmj}}</el-descriptions-item>

                <el-descriptions-item label="窗口防护网、广告牌、铁栅栏数量(个)">{{buildingPcYhLogDetailDtoList.ckfhwggptzlsl}}</el-descriptions-item>
                <el-descriptions-item label="本房屋居住人员的电动自行车数量(辆)">{{buildingPcYhLogDetailDtoList.bdfwjzrydddzxcsl}}</el-descriptions-item>
                <el-descriptions-item label="灭火器数量(个)">{{buildingPcYhLogDetailDtoList.mhqsl}}</el-descriptions-item>
                <el-descriptions-item label="防烟逃生面置数量(套)">{{buildingPcYhLogDetailDtoList.fytsmz}}</el-descriptions-item>

                <el-descriptions-item label="悬挂同定警示标牌数量(张)">{{buildingPcYhLogDetailDtoList.xggdjsbp}}</el-descriptions-item>
                <el-descriptions-item label="房屋简易喷头数量(个)">{{buildingPcYhLogDetailDtoList.jzsyjyplmhxts}}</el-descriptions-item>
                <el-descriptions-item label="房屋烟感报警器数量(个)">{{buildingPcYhLogDetailDtoList.jzszlwxdlgybjqs}}</el-descriptions-item>
                <el-descriptions-item label="屋顶、围护结构、房间隔墙使用易燃可燃夹芯彩钢板搭建">{{buildingPcYhLogDetailDtoList.wdwhjgfjgqsyyrkrgbdj}}</el-descriptions-item>
        
                <el-descriptions-item label="疏散通道使用易燃可燃材料装修">{{buildingPcYhLogDetailDtoList.sstdsyyrkrclzx}}</el-descriptions-item>
                <el-descriptions-item label="供人员疏散的场院、内院、天井设置不利于烟气扩散的顶棚、雨棚等">{{buildingPcYhLogDetailDtoList.gryssdcsszblyyqksddp}}</el-descriptions-item>
                <el-descriptions-item label="除居住外是否存在其他经营业状态">{{buildingPcYhLogDetailDtoList.cjzwqtjyytmsg}}</el-descriptions-item>
                <el-descriptions-item label="建设人员疏散通道">{{buildingPcYhLogDetailDtoList.jsrysstd}}</el-descriptions-item>
            </el-descriptions>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane label="隐患信息">
          <el-descriptions  
          :column="1" 
          class="tab-label-container"
          border>
            <el-descriptions-item label="电动自行车、电动平衡车及基蓄电池在室内及安全出口处停放、充电">
              <el-tag v-if="buildingPcYhLogDetailDtoList.use_electric_bicycle == 0">否</el-tag>
              <el-tag v-if="buildingPcYhLogDetailDtoList.use_electric_bicycle == 1">是</el-tag>
              <el-image v-for="imgItem in buildingPcYhLogDetailDtoList.use_electric_bicycle_photo_arr" :key="imgItem"
                alt="加载失败"
                :src="imgItem"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :initial-index="4"
                :preview-src-list="buildingPcYhLogDetailDtoList.use_electric_bicycle_photo_arr"
                fit="cover"
              />  
            </el-descriptions-item>
            <el-descriptions-item label="在公共区域、租住房间内、地下室使用瓶装液化石油气">
              <el-tag v-if="buildingPcYhLogDetailDtoList.use_bottled_liquefied_gas == 0">否</el-tag>
              <el-tag v-if="buildingPcYhLogDetailDtoList.use_bottled_liquefied_gas == 1">是</el-tag>
              <el-image v-for="imgItem in buildingPcYhLogDetailDtoList.use_bottled_liquefied_gas_photo_arr" :key="imgItem"
                 alt="加载失败"
                :src="imgItem"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :initial-index="4"
                :preview-src-list="buildingPcYhLogDetailDtoList.use_bottled_liquefied_gas_photo_arr"
                fit="cover"
              />  
            </el-descriptions-item>
            <el-descriptions-item label="疏散走道、楼梯间、安全出口处堆放物品影响人员疏散">
              <el-tag  v-if="buildingPcYhLogDetailDtoList.use_stacked_items == 0">否</el-tag>
              <el-tag  v-if="buildingPcYhLogDetailDtoList.use_stacked_items == 1">是</el-tag>
              <el-image v-for="imgItem in buildingPcYhLogDetailDtoList.use_stacked_items_photo_arr" :key="imgItem"
                   alt="加载失败"
                  :src="imgItem"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :initial-index="4"
                  :preview-src-list="buildingPcYhLogDetailDtoList.use_stacked_items_photo_arr"
                  fit="cover"
                />
            </el-descriptions-item>
            <el-descriptions-item label="私拉乱接电线">
              <el-tag size="small" v-if="buildingPcYhLogDetailDtoList.slljdx == 0">否</el-tag>              
              <el-tag size="small" v-if="buildingPcYhLogDetailDtoList.slljdx == 1">是</el-tag>      
              <el-image v-for="imgItem in buildingPcYhLogDetailDtoList.slljdx_photo_arr" :key="imgItem"
                   alt="加载失败"
                  :src="imgItem"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :initial-index="4"
                  :preview-src-list="buildingPcYhLogDetailDtoList.slljdx_photo_arr"
                  fit="cover"
                />        
            </el-descriptions-item>
            <el-descriptions-item label="灭火器未保持完好有效">
              <el-tag size="small" v-if="buildingPcYhLogDetailDtoList.mhqwbcwhyx == 0">否</el-tag>
              <el-tag size="small" v-if="buildingPcYhLogDetailDtoList.mhqwbcwhyx == 1">是</el-tag>
              <el-image v-for="imgItem in buildingPcYhLogDetailDtoList.mhqwbcwhyx_photo_arr" :key="imgItem"
                     alt="加载失败"
                    :src="imgItem"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :initial-index="4"
                    :preview-src-list="buildingPcYhLogDetailDtoList.mhqwbcwhyx_photo_arr"
                    fit="cover"
                  />   
            </el-descriptions-item>
            <el-descriptions-item label="简易喷淋灭火系统未保持完好有效">
              <el-tag size="small" v-if="buildingPcYhLogDetailDtoList.jyplmhxtwbcwhyx == 0">否</el-tag>
              <el-tag size="small" v-if="buildingPcYhLogDetailDtoList.jyplmhxtwbcwhyx == 1">是</el-tag>
              <el-tag size="small" v-if="buildingPcYhLogDetailDtoList.jyplmhxtwbcwhyx == 2">不涉及</el-tag>
              <el-image v-for="imgItem in buildingPcYhLogDetailDtoList.jyplmhxtwbcwhyx_photo_arr" :key="imgItem"
                     alt="加载失败"
                    :src="imgItem"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :initial-index="4"
                    :preview-src-list="buildingPcYhLogDetailDtoList.jyplmhxtwbcwhyx_photo_arr"
                    fit="cover"
                  /> 
            </el-descriptions-item>
            <el-descriptions-item label="烟感报警器未保持完好有效">
              <el-tag size="small" v-if="buildingPcYhLogDetailDtoList.ygbjwfwhyx == 0">否</el-tag>
              <el-tag size="small" v-if="buildingPcYhLogDetailDtoList.ygbjwfwhyx == 1">是</el-tag>
              <el-tag size="small" v-if="buildingPcYhLogDetailDtoList.ygbjwfwhyx == 2">不涉及</el-tag>
              <el-image v-for="imgItem in buildingPcYhLogDetailDtoList.ygbjwfwhyx_photo_arr" :key="imgItem"
                     alt="加载失败"
                    :src="imgItem"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :initial-index="4"
                    :preview-src-list="buildingPcYhLogDetailDtoList.ygbjwfwhyx_photo_arr"
                    fit="cover"
                  /> 
            </el-descriptions-item>
            <el-descriptions-item label="户主签字">
              <img :src="buildingPcYhLogDetailDtoList.sign" style="width: 80px; height: 80px;border-radius: 50%;" alt="加载失败"/>
              <!-- <el-image
                style="width: 80px; height: 80px;border-radius: 50%;"
                :src="buildingPcYhLogDetailDtoList.sign"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :initial-index="4"
                fit="cover"
              />             -->
            </el-descriptions-item>
          </el-descriptions>

        </el-tab-pane>
        <el-tab-pane label="整改信息">
          <el-scrollbar :max-height="tableH_" v-if="rectificationYhList">
              <el-descriptions  :column="1" border v-for="(item) in rectificationYhList" :key="item.check_name">                
                <el-descriptions-item label="隐患类型">
                  {{item.check_name}}
                </el-descriptions-item>
                <el-descriptions-item label="整改时间">
                  {{item.zg_time}}
                </el-descriptions-item>
                <el-descriptions-item label="整改人">
                  {{item.zg_name}}
                </el-descriptions-item>
                <el-descriptions-item label="整改照片">
                  <el-image v-for="imgUrl in item.mapImg" :key="imgUrl"
                    :src="imgUrl"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :preview-src-list = "item.mapImg"
                    :initial-index="4"
                    fit="cover"
                  />   
                </el-descriptions-item>
              </el-descriptions>
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>

    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, computed, watch,reactive, onUnmounted } from 'vue'
import { getYhlxList,getRegionTree,getDpYhlxfAllYh,getDpYhlxfAllYhCheck } from '@/api/indexNew.js'

//tab
//
const emits = defineEmits(['updateCurrentQu'])
const props = defineProps({
  Params: {
    type: Object,
    default: () => {},
  },
  isMapClick: {
    type: Boolean,
    default: false,
  },
  tableTitle:{
    type:String,
    default:''
  }
})
const props1 = {
  checkStrictly: true,
}

const timeChange = (value) => {
  formInline.timeRange = [value[0], value[1]]
}


const tableColumns = ref([
  {
    prop: 'index',
    label: '序号',
    width: '80',
    align: 'center',
  },
  {
    prop: 'fwbh',
    label: '房屋编号',
    align: 'center',
    width:'140'
  },
  {
    prop: 'hzxm',
    label: '房屋姓名',
    align: 'center',
    width: '140',
    overflow: true
  },
  {
    prop: 'address',
    label: '地址',
    align: 'center',
    overflow: true   
  },
  {
    prop: 'xzq',
    label: '行政区',
    align: 'center',
    sortable: false,
    width: '100'
  },
  {
    prop: 'check_name',
    label: '隐患类型',
    align: 'center',
    width: 400,
    overflow: true,
    sortable: false,
  },
  {
    prop: 'fxcs',
    label: '发生次数',
    align: 'center',
    sortable: true,
    width: '80'
  },
])
const tableColumnsFw = ref([
  {
    prop: 'index',
    label: '序号',
    width: '60', 
    align: 'center',
  },
  {
    prop: 'jcly',
    label: '检查来源',
    width: '80', 
    align: 'center',
  },
  {
    prop: 'zg_value',
    label: '是否整改',
    align: 'center',
    width: '80', 
    overflow: true
  },
  {
    prop: 'check_nickname',
    label: '检查人姓名',
    align: 'center',
    width: '80',
    overflow:true
  },
  {
    prop: 'check_time',
    label: '检查时间',
    align: 'center',
    width: '140',
    sortable: false,
  },
  // {
  //   prop: 'xzqdm',
  //   label: '行政区代码',
  //   align: 'center',
  //   sortable: false,
  // },
  {
    prop: 'xzq',
    label: '行政区名称',
    align: 'center',
     width: '80'
  },
  // {
  //   prop: 'towndm',
  //   label: '街镇代码',
  //   align: 'center',
  // },
  {
    prop: 'town',
    label: '街镇名称',
    align: 'center',
     width: '80'
  },
  {
    prop: 'village',
    label: '村名称',
    align: 'center',
    width: '120',
    overflow: true
  },
  // {
  //   prop: 'villagedm',
  //   label: '村代码',
  //   align: 'center',
  // },
  {
    prop: 'fwbh',
    label: '房屋编号',
    align: 'center',
    width: '140',
  },
  {
    prop: 'address',
    label: '房屋地址',
    align: 'center',
    overflow: true
  },
  {
    prop: 'hzxm',
    label: '户主姓名',
    align: 'center',
    width: '80',
    overflow: true
  },
  {
    prop: 'check_name',
    label: '隐患类型名称',
    align: 'center',
    overflow: true
  },
])
const formInline = reactive({
    xzqdms:[],
    yhlx:'',
    timeRange:[]
    
})

const yhlxOptions = ref([
    {
        value:'ygbjwfwhyx',
        name:'烟感报警器未保持完好有效'
    },
    {
        value:'mhqwbcwhyx',
        name:'灭火器未保持完好有效'
    },
    {
        value:'use_bottled_liquefied_gas',
        name:'使用瓶装液化石油气数量'
    },
    {
        value:'use_electric_bicycle',
        name:'室内停放、充电电动车数量'
    },
    {
        value:'use_stacked_items',
        name:'影响人员疏散的堆放物品'
    },
    {
        value:'jyplmhxtwbcwhyx',
        name:"简易喷淋灭火系统未保持完好有效",
    },
    {
        value:'slljdx',
        name:'私拉乱接电线'
    }
])
watch(
  () => props.isMapClick,
  (newValue, oldValue) => {
    // console.log('@newValue===监听', newValue)
    if (newValue) {
      tableColumns.value[1] = {
        prop: 'town',
        label: '乡镇',
        align: 'center',
      }
    }
  },
  { deep: true, immediate: true }
)
const newTableData = ref([])
const dynamicColumns = computed(() => {
  // 动态生成列，并为需要排序的列定义排序方法
  let tableColumnsTmp 
  if(props.Params.level === 1){
    tableColumnsTmp = tableColumns.value
  }
  if(props.Params.level === 2){
    tableColumnsTmp = tableColumnsFw.value
  }
  return tableColumnsTmp.map((column) => {
    if (column.sortable) {
      return {
        ...column,
        sortMethod: sortByPercentage('value'), // 应用排序方法
      }
    } else {
      return { ...column }
    }
  })
 
})
const tableH = ref('0px')
const tableRef = ref(null)
const tableH_ = ref('0px')
let timer;
const getTableH = () => {
timer = setTimeout(() => {
    let h_ =  document.querySelector('.right3').offsetHeight 
    tableH.value = h_ - (50/590)*h_ - (36/590)*h_
    tableH_.value = h_ - (43/590)*h_
    return `${tableH.value}px`
  }, 200)
}
const sortByPercentage = (prop) => {
  // 通过闭包传递列属性
  return (a, b) => {
    const numA = parseFloat(a[prop])
    const numB = parseFloat(b[prop])
    return numA - numB
  }
}
const allTitle = ref([])
const oneCode = ref('')
const twoCode = ref('')
let formInline_ = {};
let page_ = ref('')
let pageT = ref('')
//点击查看检查
const handlePopulationClick = (row, column) => {
  // 在这里编写处理“居住人口数量”列点击事件的逻辑
  props.Params.level = 2
  let name = `${row.hzxm}检查记录`
  allTitle.value.push(name)
  formInline_ = JSON.parse(JSON.stringify(formInline));
  page_.value = formInline.pageindex
  page.value = 1;
  formInline_.pageindex = page.value
  formInline_.fwbh = row.fwbh
  getYhlxfAllyh(formInline_)

}
const getYhlxfAllyh = async (params) => {

  let res = await getDpYhlxfAllYh(params)
  total.value = res.data && res.data.data && res.data.data.total
  let list = []
  list = res && res.data && res.data.data && res.data.data.items
  let modifiedList = list.map((item, index) => {
    item.index = index + 1    
    return item
  })
  newTableData.value = modifiedList
  if (newTableData.value.length > 0) {
    emitCurrentQu()
  }

}
const checkFwInfo = ref({
  'buildingPcYhLogDetailDtoList':{},

})
const buildingPcYhLogDetailDtoList = ref({})
const rectificationYhList = ref([])
let params_ = {}
//下钻房屋信息
const handleCheckFw = async (params,column) =>{
  props.Params.level = 3
  let name = `详情`
  allTitle.value.push(name)
  pageT.value = formInline_.pageindex 
  params_ = JSON.parse(JSON.stringify(params))
  getFwData(params)


}

const formateJsonData = (strJson) =>{
    let arr_ = strJson?JSON.parse(strJson):[]
    let newData = arr_.filter((cell) =>{
      if(cell.trim().length > 0){
        return cell
      }
    })

    return newData
}

const getFwData = async (params) =>{
    if(!params.id){
      return ;
    }
    let res = await getDpYhlxfAllYhCheck(params.id)
    let buildingPcYhLogDetailDtoList_ = res && res.data && res.data.data && res.data.data.buildingPcYhLogDetailDtoList
    let list_ = buildingPcYhLogDetailDtoList_.map((item,index) =>{
    item.use_electric_bicycle_photo_arr = formateJsonData(item.use_electric_bicycle_photo)
    item.use_bottled_liquefied_gas_photo_arr = formateJsonData(item.use_bottled_liquefied_gas_photo)
    item.use_stacked_items_photo_arr = formateJsonData(item.use_stacked_items_photo)
    item.slljdx_photo_arr = formateJsonData(item.slljdx_photo)
    item.mhqwbcwhyx_photo_arr = formateJsonData(item.mhqwbcwhyx_photo)
    item.Jyplmhxtwbcwhyx_photo_arr = formateJsonData(item.Jyplmhxtwbcwhyx_photo)
    item.Ygbjwfwhyx_photo_arr = formateJsonData(item.Ygbjwfwhyx_photo)
    return item 
  })

  buildingPcYhLogDetailDtoList.value = list_[0]
  if(buildingPcYhLogDetailDtoList_.length>0){
    emitCurrentQu()
  }
  let modifiedList = []
  let rectificationYhList_ = res && res.data && res.data.data && res.data.data.rectificationYhList 
  modifiedList = rectificationYhList_.map((item, index) => {
    item.mapImg =item.zg_zp? JSON.parse(item.zg_zp) :[]
    return item
  })
   
   rectificationYhList.value = modifiedList
  
}

const emitCurrentQu = () => {
  // 发送自定义事件通知父组件
  emits('updateCurrentQu', allTitle.value, props.Params.level)
}
const backFn = () => {
  if (props.Params.level === 2) {
    props.Params.level = 1
    newTableData.value = []
    props.Params.code = formInline.villagedm ? formInline.villagedm:formInline.towndm?formInline.towndm:formInline.xzqdm?formInline.xzqdm:''
    allTitle.value.pop()
    emits('updateCurrentQu', allTitle.value, props.Params.level)   
    page.value = page_.value?page_.value:1
    getYhlxListFunc()
    
   // getXzList()
  } else if (props.Params.level === 1) {
    newTableData.value = []
    props.Params.code = ''
    allTitle.value = []
    //getXzList()
  }else if(props.Params.level === 3){
    props.Params.level = 2
    buildingPcYhLogDetailDtoList.value = {}
    rectificationYhList.value = []
    props.Params.code = formInline.villagedm ? formInline.villagedm:formInline.towndm?formInline.towndm:formInline.xzqdm?formInline.xzqdm:''
    allTitle.value.pop()
    emits('updateCurrentQu', allTitle.value, props.Params.level)
    formInline_.pageindex = pageT.value ?pageT.value:1
    console.log(formInline_,'backFn')
    getYhlxfAllyh(formInline_)
    if (newTableData.value.length > 0) {
      emitCurrentQu()
    }
  }
}
let zoneList = ref([
    {
        value:'',
        label:'',
        children:[]
    }
])


const getRegionTreeFunc = async()=>{
    let res = await getRegionTree()
    //zoneList = res && res.data
    zoneList.value = res.data.data
    //console.log(res.data,zoneList,'hihihihihi')
}
const handleCurrentChange = () =>{
  if(props.Params.level  === 1){
    getYhlxListFunc()
  }else{
    getYhlxfAllyh(formInline_)
  }
}
const total = ref(0)
const limit = ref(15)
const page = ref(1)
const getYhlxListFunc = async() =>{
    formInline.pageindex = page
    formInline.startime = formInline.timeRange[0]
    formInline.endtime = formInline.timeRange[1]
    let xzqdms = formInline.xzqdms
    formInline.xzqdm = xzqdms && xzqdms[0]
    formInline.towndm = xzqdms &&xzqdms[1]
    formInline.villagedm = xzqdms && xzqdms[2]
    formInline.limit = limit
    let res = await getYhlxList(formInline)
    total.value = res.data && res.data.data && res.data.data.total
    let newTableDataTmp = res.data && res.data.data && res.data.data.items
    let newTableDataList = newTableDataTmp.map((item, index) => {
        item.index = index + 1
        return item
    })
    newTableData.value = newTableDataList
}

const getData = () =>{
    page.value = 1
    getYhlxListFunc() 
}
let intervaler;
const task10Min_ = () => {
  intervaler = setInterval(() => {

      switch(props.Params.level ){
        case 1:
          getYhlxListFunc();
          break;
        case 2:
          console.log(formInline_,'10min')
          getYhlxfAllyh(formInline_)
          break;
        case 3:
          getFwData(params_)  
          break;
      }
      // _getYhlxfxData() // 13.隐患类型分析
    }, 600000) // 10分钟的毫秒数 300000
}


onMounted(() => {
  getTableH()
  //获取行政
  getRegionTreeFunc()
  //定时任务
  task10Min_()
  //获取隐患数据
  let params = props.Params
  const {yhlx,startime,endtime} = params
  let yhlxOptionsData = yhlxOptions.value
  let item = yhlxOptionsData.find(item => item.name === yhlx)
  formInline.yhlx = item.value
  let timeRange = [`${startime}`, `${endtime}`]

  formInline.timeRange = timeRange
  getYhlxListFunc()
  //收集参数
})

onUnmounted(() =>{
  clearInterval(intervaler)
  clearTimeout(timer)
})

defineExpose({
  backFn,
})
</script>
<style scoped lang="scss">
.right3 {
  width: 100%;
  height: 100%;
  flex: 1;
  //   border: 1px solid red;
  // 表格部分样式
  // 最外层透明
  ::v-deep .el-table,
  ::v-deep .el-table__expanded-cell {
    background-color: transparent;
    color: #93dcfe;
    font-size: 2.2rem;
    border-bottom: 1px solid transparent; // 去掉表格体 的 边框
  }
  ::v-deep .el-form-item__label{
    color: #93dcfe;
    font-size: 1.3rem;
  }
  ::v-deep .el-input__wrapper, 
  ::v-deep .el-tabs__content,
  ::v-deep .el-tabs--border-card,
  ::v-deep .el-tabs__header.is-top,
  ::v-deep .el-tabs__item.is-top.is-active,
  ::v-deep .el-pager>li{
     background-color: transparent;
  }
  //图片
  ::v-deep .el-image{
    vertical-align: middle;
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  ::v-deep td.el-descriptions__cell.el-descriptions__label.is-bordered-label {
    width: 210px;
    height:56px;
  }

  //el-tag
  ::v-deep div#pane-1 span.el-tag.el-tag--light{
    margin-right:10px
  }

  //tab
  ::v-deep .el-tabs--border-card{
    border:none
  }
 ::v-deep div#pane-0 td.el-descriptions__cell.el-descriptions__content.is-bordered-content {
    padding-left: 46px;
  } 
 ::v-deep div#pane-1 td.el-descriptions__cell.el-descriptions__label.is-bordered-label{
      width: 19%;
  }
  ::v-deep div#pane-1 td.el-descriptions__cell.el-descriptions__content.is-bordered-content {
    padding-left: 67px;
  }
  ::v-deep div#pane-2 td.el-descriptions__cell.el-descriptions__label.is-bordered-label{
    width: 230px;
  }

  ::v-deep div#pane-2 td.el-descriptions__cell.el-descriptions__content.is-bordered-content {
    padding-left: 30px;
  }
  //tab标签
  ::v-deep .el-tabs__item.is-top{
    background-color: #1098f3;
  }
  //tab边框
  ::v-deep .el-tabs__nav.is-top {
    border: 2px solid rgb(16, 152, 243);
    border-radius: 5%;
}

  ::v-deep .el-descriptions__label:not(.is-bordered-label),
  ::v-deep .el-descriptions__content:not(.is-bordered-label){    
    color: #93dcfe;
  }

  //tab border
  ::v-deep .el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell{
    border:none;
  }
  //tab文字
  ::v-deep .el-descriptions__body,
  ::v-deep .el-descriptions__label.el-descriptions__cell.is-bordered-label,
  ::v-deep .btn-prev,
  ::v-deep .el-pagination__total,
  ::v-deep .el-pager,
  ::v-deep .el-pager>[aria-current=flase],
  ::v-deep .btn-next{
    background-color:transparent;
    color:#93dcfe
  }
  ::v-deep .el-input__inner,
  ::v-deep .el-range-input,
  ::v-deep .el-range-separator,
  ::v-deep .el-pager>[aria-current=true],
  ::v-deep .el-input__inner::placeholder,
  ::v-deep .el-tabs__item.is-top,
  ::v-deep .el-tabs__item.is-top.is-active
  {
    color:white
  }
  /* 表格内背景颜色  */
  ::v-deep .el-table {
    th,
    tr,
    td {
      background-color: transparent;
      border: none;
      color: #93dcfe;
      font-size: 2.2rem;
      // height: 5px;
      font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
      font-weight: Normal;
    }
  }
  ::v-deep .el-table__body-wrapper {
    .el-table__body {
      // border: 1px solid red;
      // background-color: red;
      .el-table__row {
        border: 10px solid red;
        // background-color: yellow;
      }
    }
  }
  /* // 设置表格行高度 */
  ::v-deep .el-table__body tr {
    padding: 0;
    height: 54px;
    border: 1px solid red;
  }

  /* // 修改高亮当前行颜色 */
  ::v-deep .el-table tbody tr:hover > td {
    background: #063570 !important;
  }

  /* // 取消当前行高亮 */
  //   ::v-deep .el-table tbody tr {
  //     pointer-events: none;
  //   }

  /* 修改表头样式-加边框 */
  //   ::v-deep .el-table__header-wrapper {
  //      border: solid 1px #04c2ed;
  //   }

  /* // 表格斑马自定义颜色 */
  ::v-deep .el-table__row.warning-row {
    background: #01205a;
  }



  /* 去掉表格里的padding */
  ::v-deep .el-table .cell,
  .el-table th div {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    font-size: 1.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.content-color {
  text-decoration: underline;
  cursor: pointer;
}
</style>
